<!-- 组件说明 -->
<template>
    <div class='header'>
        <el-row>
            <el-col :span="10">
                <div class="headerlogo">
                    <img src="../../assets/img/main/LOGO.png" style="width:70%" alt="">
                </div>
            </el-col>
            <el-col :span="14" class="maintop">
                <el-menu style="background: rgb(41, 41, 41,0.1);" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="main">首页</el-menu-item>
                    <el-menu-item index="about">关于我们</el-menu-item>
                    <el-menu-item index="news">新闻中心</el-menu-item>
                    <el-menu-item index="servingcus">服务客户</el-menu-item>
                    <el-menu-item index="prouct">解决方案</el-menu-item>
                    <el-menu-item index="joinus">加入我们</el-menu-item>
                    <span style="height: 55px;display: flex;align-items: center;float: right;">
                        <img src="../../assets/img/main/phone.png">
                        <span style="diaplay:inline-block;margin-left:10px;margin-right:30px;font-size: 20px;color: #3b96e6;">{{phonenumber}}</span>
                    </span>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

<script>
     //使用中央总线来实现兄弟组件间传值
    import Bus from '../../request/bus'
     import {getFootInfo} from "../../request/api";
    export default {
        components: {

        },
        data () {
            return {
                activeIndex: 'main',
                isActive:false,
                isAbout:false,
                phonenumber:''
            };
        },
        computed: {

        },
        created(){
            //面包屑导航到首页
            Bus.$on("main", val=>{
                //设置按钮活动的index
                this.activeIndex = 'main';
                //传递给父组件
                this.handleSelect('main');
            });
            //新闻详情
            Bus.$on('newsid',val=>{
                //设置按钮活动的index
                this.activeIndex = 'news';
                //传递给父组件
                this.handleSelect('news');
            });
            //底部信息按钮
            Bus.$on("authordombottom", val=>{
                //设置按钮活动的index
                this.activeIndex = 'about';
                //传递给父组件
                this.handleSelect('about');
            });
            //解决方案
            Bus.$on("looksolution", val=>{
                //设置按钮活动的index
                this.activeIndex = 'prouct';
                //传递给父组件
                this.handleSelect('prouct');
            });
            //服务与支持
            Bus.$on('servers',val=>{
                //设置按钮活动的index
                this.activeIndex = 'prouct';
                //传递给父组件
                this.handleSelect('prouct');
            });
             //新闻
            Bus.$on('newslist',val=>{
                //设置按钮活动的index
                this.activeIndex = 'news';
                //传递给父组件
                this.handleSelect('news');
            });
        },
        methods: {
          getCompanyinfo() {
            getFootInfo().then(res => {
              this.phonenumber = res.phone
            })
          },
            handleSelect(key) {
                //传递给父组件，点击的是哪一个顶部菜单
                this.activeIndex = key;
                this.$emit('headerclick',key);
            }

        },
        mounted() {
          this.getCompanyinfo();
        },
        //生命周期 - 创建之前
        beforeCreate() {},
        //生命周期 - 挂载之前
        beforeMount() {},
        //生命周期 - 更新之前
        beforeUpdate() {},
        //生命周期 - 更新之后
        updated() {},
        //生命周期 - 销毁之前
        beforeDestroy() {},
        //生命周期 - 销毁完成
        destroyed() {},
        //如果页面有keep-alive缓存功能，这个函数会触发
        activated() {},
    }
</script>
<style>
.maintop .el-menu-item{
    padding: 0 12px;
}
</style>
<style scoped>
.el-menu--horizontal>.el-menu-item,.el-menu--horizontal .el-menu-item:not(.is-disabled):focus{
    /* color: #000; */
}
.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
    background: #e1e1e2;
}
.el-menu.el-menu--horizontal {
    border-bottom: solid 0px #e6e6e6;
}

.el-menu::after {
    clear: both;
    height: 2px;
}
.header{
    position: fixed;
    width: 100%;
    top: 0;
    background: #F6F6F7;
    opacity:0.9;
}
.el-menu--horizontal>.el-menu-item {
    height: 55px;
    line-height: 55px;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover,.el-menu-item, .el-menu--horizontal>.el-menu-item.is-active{
    color: #000;
}
.headerlogo{
    display: flex;
    justify-content:center;
    align-items: center;
    height: 55px;
    background: rgb(41, 41, 41,0.1);
}
</style>
